import { redirect } from 'next/navigation';
import MainLayout from '@/components/layout/MainLayout';
import { IArtwork } from '@/types/artwork';
import artworks from '@/data/works.json';

// 为静态导出生成所有可能的slug参数
export async function generateStaticParams() {
  const allWorks = artworks as IArtwork[];
  return allWorks.map((work) => ({
    slug: work.slug,
  }));
}

interface ArtworkDetailProps {
  params: {
    slug: string;
  };
}

export default function ArtworkDetail({ params }: ArtworkDetailProps) {
  const { slug } = params;
  const work = artworks.find(artwork => artwork.slug === slug);

  if (!work) {
    redirect('/404');
  }
  
  // 获取上一个和下一个作品
  const allWorks = artworks as IArtwork[];
  const currentIndex = allWorks.findIndex((work) => work.slug === slug);
  const prevWork = currentIndex > 0 ? allWorks[currentIndex - 1] : null;
  const nextWork = currentIndex < allWorks.length - 1 ? allWorks[currentIndex + 1] : null;

  return (
    <MainLayout>
      <section className="py-16 bg-paper">
          <div className="container mx-auto px-4">
            <div className="flex flex-col md:flex-row gap-12">
              {/* 左侧：作品图片展示 */}
              <div className="md:w-1/2">
                <div className="relative bg-white p-6 rounded-sm shadow-sm">
                  {/* 主图 */}
                  <div className="mb-4 bg-paper-dark aspect-[4/5] flex items-center justify-center">
                    <p className="text-ink-light">{work.title} - 图片占位</p>
                  </div>

                  {/* 细节图缩略图 */}
                  {work.images.details.length > 0 && (
                    <div className="grid grid-cols-4 gap-3">
                      {work.images.details.map((detailImage, index) => (
                        <div
                          key={index}
                          className="bg-paper-dark aspect-square hover:opacity-90 transition-opacity duration-300"
                        >
                          <div className="w-full h-full flex items-center justify-center">
                            <p className="text-ink-light text-xs">细节 {index + 1}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              {/* 右侧：作品信息 */}
              <div className="md:w-1/2">
                <div className="bg-white p-8 rounded-sm shadow-sm">
                  <h1 className="text-3xl font-bold mb-3 text-ink">{work.title}</h1>
                  <p className="text-xl mb-6 text-ink-light">{work.artist} · {work.year}</p>

                  {/* 作品分类标签 */}
                  <div className="flex flex-wrap gap-2 mb-8">
                    {work.category.map((category, index) => (
                      <span key={index} className="text-xs bg-paper text-ink-light px-3 py-1 rounded-sm">
                        {category}
                      </span>
                    ))}
                  </div>

                  {/* 作品基本信息 */}
                  <div className="space-y-4 mb-8">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <h3 className="text-sm text-ink-light mb-1">材质</h3>
                        <p className="text-ink">{work.medium}</p>
                      </div>
                      <div>
                        <h3 className="text-sm text-ink-light mb-1">技法</h3>
                        <p className="text-ink">{work.technique}</p>
                      </div>
                      <div>
                        <h3 className="text-sm text-ink-light mb-1">尺寸</h3>
                        <p className="text-ink">{work.dimensions}</p>
                      </div>
                      <div>
                        <h3 className="text-sm text-ink-light mb-1">印章</h3>
                        <p className="text-ink">{work.seals.join('、')}</p>
                      </div>
                    </div>
                  </div>

                  {/* 题字/释文 */}
                  {work.inscription && (
                    <div className="mb-8">
                      <h3 className="text-lg font-medium mb-3 text-ink">题字/释文</h3>
                      <div className="bg-paper p-4 rounded-sm">
                        <p className="text-ink-light italic">{work.inscription}</p>
                      </div>
                    </div>
                  )}

                  {/* 作品描述 */}
                  <div className="mb-8">
                    <h3 className="text-lg font-medium mb-3 text-ink">作品描述</h3>
                    <p className="text-ink-light leading-relaxed">{work.description}</p>
                  </div>

                  {/* 上一篇/下一篇导航 */}
                  <div className="flex justify-between pt-6 border-t border-gray-100">
                    {prevWork ? (
                      <a
                        href={`/gallery/${prevWork.slug}`}
                        className="flex items-center text-ink-light hover:text-ink transition-colors"
                      >
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                        </svg>
                        <span className="text-sm">上一篇</span>
                      </a>
                    ) : (
                      <div className="w-24"></div>
                    )}
                    
                    {nextWork ? (
                      <a
                        href={`/gallery/${nextWork.slug}`}
                        className="flex items-center text-ink-light hover:text-ink transition-colors"
                      >
                        <span className="text-sm">下一篇</span>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </a>
                    ) : (
                      <div className="w-24"></div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    </MainLayout>
  );}